<!-- 巡检标准 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">标准</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<template v-if="curNodeList.length > 0">
						<template v-for="(standard, index) in curNodeList" :key="standard.primaryKey">
							<div class="zs-align-center zs-space-bottom" :class="index > 0 && 'zs-space-top-bg'" :id="standard.id">
								<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
								<div class="zs-title">
									<span>标准{{ index + 1 }}</span>
									<el-icon v-if="handleType != 'info'" class="delete-btn zs-space-left-sm" color="#000000" @click="deleteItem(index)"><Delete /></el-icon>
								</div>
							</div>
							<div class="zs-card zs-space-bottom">
								<el-form ref="formRef" label-position="right" label-width="100px" :model="standard">
									<el-form-item label="标准详情：" prop="inspectionContent" :rules="[{ required: true, message: '请输入标准详情', trigger: ['change', 'blur'] }]">
										<el-input v-model="standard.inspectionContent" :maxlength="curTextareaLength" show-word-limit type="textarea" :autosize="{ minRows: 2 }" :disabled="isReadOnly" />
									</el-form-item>
								</el-form>
							</div>
						</template>
					</template>
					<el-empty v-else description="暂无数据" />
					<el-button v-if="handleType == 'edit'" class="zs-link" style="width: 100%" plain @click="addItem">新增</el-button>
				</el-scrollbar>
				<DocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { standardConfigSaveApi, standardConfigInfoApi } from '@/api/inspect.js';
	import { ElMessage } from 'element-plus';
	import { ref, watch, nextTick } from 'vue';
	import { useStore } from 'vuex';
	import { guid } from '@/utils/publicUtils';
	import DocWrapper from '@/components/DocWrapper.vue';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
		standradTypeList: { type: Array },
	});

	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);
	const curTextareaLength = ref(store.state.uiTextareaLength);
	const emit = defineEmits(['close']);
	let isShowDrawer = ref(props.isShow);
	let curNodeList = ref([{ inspectionContent: '', primaryKey: guid() }]);
	let formRef = ref([]);

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && getInfo();
			});
		},
	);

	//新增
	const addItem = () => {
		let sourceObj = {
			inspectionContent: '',
			primaryKey: guid(),
		};
		curNodeList.value.push(sourceObj);
		initCurNodeList();
	};

	//删除
	const deleteItem = index => {
		if (curNodeList.value.length == 1) {
			ElMessage({ message: '至少保留一条', type: 'warning' });
			return;
		}
		curNodeList.value.splice(index, 1);
		initCurNodeList();
	};

	//侧边栏的list的name和id
	const initCurNodeList = () => {
		curNodeList.value.forEach((item, index) => {
			item.name = '标准' + (index + 1);
			item.id = 'card' + index;
			item.primaryKey = guid();
		});
	};

	//提交
	const doConfirm = async () => {
		const validatePromises = formRef.value.map(form => new Promise(resolve => form.validate(resolve)));
		Promise.all(validatePromises).then(async results => {
			if (results.includes(false)) return;
			let nodeList = curNodeList.value.map((item, index) => ({ inspectionContent: item.inspectionContent, sort: index }));
			let params = {
				list: nodeList,
				inspectionStandardId: props.currentRow.id,
			};
			let res = await standardConfigSaveApi(params);
			if (res.data.code != 200) return;
			ElMessage({
				message: '提交成功',
				type: 'success',
			});
			isShowDrawer.value = false;
			emit('close', { isShow: false, isRefresh: true });
		});
	};

	//详情
	const getInfo = async () => {
		let res = await standardConfigInfoApi({ id: props.currentRow.id });
		if (res.data.code != 200) return;
		if (!res.data.data || res.data.data.length == 0) {
			res.data.data = [{ inspectionContent: '', primaryKey: guid() }];
		}
		curNodeList.value = res.data.data;
		initCurNodeList();
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
</script>

<style lang="scss" scoped>
	.delete-btn {
		cursor: pointer;
		color: #333;
		position: relative;
		top: 1px;
	}
	.delete-btn:hover {
		opacity: 0.7;
	}
</style>
